<template>
	<view class="login-wrapper full box relative">
		<view class="login-image">
			<image :src="sourceUrl + '/login.png'" mode="widthFix" class="img"></image>
		</view>
		<view class="footer-wrap">
			<view class="login-btn">
				<button hover-class="hover" class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
					<text>授权一键登录</text>
				</button>
			</view>
			<!-- <view class="servide-wrap">
				<text class="service-text">登录即表示您已阅读并同意用户协议及隐私条款</text>
				<text class="service-text active">用户协议</text>
				<text class="service-text">及</text>
				<text class="service-text active">隐私条款</text>
			</view> -->
		</view>

		<!-- <view class="footer-wrap">
			<u-checkbox-group>
				<u-checkbox @change="onChange" v-model="checked" shape="circle" />
			</u-checkbox-group>
			<view class="sercice">
				<text>登录即表示你同意隐私政策</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		onLoad(ev) {
			// #ifdef MP-WEIXIN
			if (ev.hasOwnProperty('type') && ev.hasOwnProperty('sn')) {
				const {
					type,
					sn
				} = ev
				if (type !== 'invite') return
				this.sn = sn
			}
			// #endif
		},
		methods: {
			async getPhoneNumber(ev) {
				const {
					code
				} = ev.detail
				const resp = await this.$request({
					url: "/user/getMobileByMnp",
					data: {
						code
					},
				})
				const {
					code: respCode,
					data,
					msg
				} = resp
				if (respCode !== 1) return this.$toast({
					title: msg
				})
				const {
					mobile
				} = data
				this.wxLogin(mobile)
				console.log(resp, 'resp');
			},
			wxLogin(mobile) {
				uni.login({
					provider: 'weixin',
					success: async ev => {
						const {
							code
						} = ev
						const loginPayload = {
							code,
							mobile
						}
						if (this.isInvite) loginPayload.sn = this.sn
						const resp = await this.$request({
							url: "/login/mnpLogin",
							data: loginPayload,
						})
						const {
							data
						} = resp
						this.$store.commit('login', data.token)
						this.$store.dispatch('getUserinfo')
						this.$store.commit('location/setUpdate', true)
						this.$toast({
							title: "登录成功"
						}, () => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						})
						console.log(resp, 'resp');
					}
				})
			},
			toRegister() {
				uni.navigateTo({
					url: '/pages/login/acount-login?type=register'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/acount-login'
				})
			},
			onChange(ev) {
				this.checked = ev
			}
		},
		computed: {
			wxBtnTitle() {
				if (this.isInvite) return '同意邀请,一键注册'
				return '一键登录'
			},
			isInvite() {
				return !!this.sn
			},
		},
		data() {
			return {
				checked: false,
				sn: '',
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-wrapper {
		.footer-wrap {
			padding: 24rpx 0;
			box-sizing: border-box;
			width: 100%;
			position: fixed;
			top: 880rpx;

			.servide-wrap {
				text-align: center;
				font-size: 20rpx;
				margin-top: 24rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.service-text {
				color: #707070;

				&.active {
					color: #333333;
					text-decoration: underline;
				}
			}
		}

		.login-btn {
			width: 100%;
			padding: 0 88rpx;
			box-sizing: border-box;

			.btn {
				border: none;
				height: 80rpx;
				background: linear-gradient(315deg, #1FBA5E 0%, #1FBA5E 100%);
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				color: #fff;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;

				&.hover {
					opacity: .8;
				}
			}
		}

		.login-image {
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			padding-top: 18rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;

			.img {
				width: 650rpx;
				margin: 0 auto;
			}
		}


		.footer-wrap2 {
			position: absolute;
			bottom: 48rpx;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;

			.sercice {
				height: 44rpx;
				font-size: 28rpx;
				color: #1D2129;
				line-height: 44rpx;
			}
		}
	}
</style>